<!--
 * @Description: 
 * @version: 
 * @Author: wyx
 * @Date: 2020-09-17 20:15:11
 * @LastEditDate: Do not exit
-->
<template>
  <div class="login_container">
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="200"
      shapeType="star"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
      style="height:100%"
    >
    </vue-particles>
    <div class="login">
      <div class="box">
        <div class="boxh">
          <h1>登录</h1>
        </div>
        <div class="boxf">
          <el-form ref="loginForm" :rules="rules" :model="loginForm" label-width="80px">
            <el-form-item label="账号" prop="username">
              <el-input v-model="loginForm.username" style="width:280px" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="loginForm.password" style="width:280px" clearable></el-input>
            </el-form-item>
            <el-form-item style="margin-left:50px">
              <el-button type="danger" plain @click="submitForm('loginForm')">提交</el-button>
              <el-button @click="resetForm('loginForm')" type="info" plain>重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {login} from "@/api/user.js";
import ShareData from '@/utils/localStorage.js'

export default {
  data(){
    return{
      loginForm:{username:"",password:""},
      rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' }
          ],
      },

    }
  },
  methods:{
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            login(this.loginForm).then(res=>{
              if(res.data.code==="0000"){
                this.$message.success("登录成功")
                ShareData.setToken(res.data.data.token);
                ShareData.setItem("username",this.loginForm.username);
                this.$router.push("/home")
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },

}
</script>

<style scoped>
.login_container {
  /* background-image: linear-gradient(-180deg, #ca14bb 0%, #f374a9 100%); */
  background-image: url("~@/assets/images/star1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}
.login{
    width: 600px;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.box{
  width: 500px;
  height: 80%;
  box-shadow: -1px -2px 6px 6px #fcdbe1;
  padding-top:5% ;
  /* border: 1px solid #fff; */
}
h1{
  text-align: center;
}

.boxf{
  margin-left: 40px;
}
</style>